<template>
  <div class="content">
    <div class="title">转化 </div>
    <div class="data">
      <div class="item" v-for="item in content" :key="item.name">
        <div class="myname">
          {{ item.name }}
          <el-tooltip v-if="item.desc" :content="item.desc" effect="light" placement="top">
            <el-icon style="margin-left: 4px; color: #fff; background: #969696; border-radius: 50%">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
        <div class="num"> {{ item.a }}</div>
        <div class="desc">
          环比：<span :class="item.b > 0 ? 'color_red' : 'color_green'">{{ item.b }}</span></div
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="tsx">
  import { reactive, ref, watch, computed, onMounted } from 'vue'
  import { getConverse } from '@/api/ecommerce/storeManage'
  const props = defineProps(['params'])
  const content = ref([
    { name: '访问加购转化率', desc: '选定条件下，加购商品的人数/访客量', a: 0, b: 0 },
    { name: '访问支付转化率', desc: '选定条件下，支付人数/访客量', a: 0, b: 0 },
    { name: '下单支付转化率', desc: '选定条件下，支付人数/下单人数', a: 0, b: 0 },
    { name: '客户复购率', desc: '选定条件下，复购人数/支付人数', a: 0, b: 0 }
  ])
  const getConverseS = async (params: any) => {
    const res = await getConverse(params)
    console.log('转化率‘22222222', res)
  }
</script>
<style scoped lang="scss">
  .content {
    .title {
      display: flex;
      padding-bottom: 14px;
      margin-bottom: 26px;
      border-bottom: 1px solid #eaeaea;
    }
  }
  .data {
    display: flex;
    justify-content: space-around;
    .item {
      .myname {
        display: flex;
        padding-bottom: 16px;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #696969;
        line-height: 14px;
      }
      .num {
        margin-bottom: 17px;
        font-size: 24px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #33302d;
        line-height: 25px;
      }
      .desc {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #696969;
        line-height: 14px;
        .color_red {
          color: #fe292b;
        }
        .color_green {
          color: #60b900;
        }
      }
    }
  }
</style>
